<template>
	<view class="uc-deployment-selector" >
		<view class="deployment-info" :class="{active: show}" @click="toggleShow">
			<view class="deployment-label">{{deployment.name}}</view>
			<view class="iconfont icon-angle-down"></view>
		</view>
		<view class="selector" v-if="show">
			<view class="option" :class="{active: item.id == deployment.id && item.platform == deployment.platform}" v-for="(item, idx) in deployments" :key="idx" @click="onSelect(item)">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uc-deployment-selector",
		props:{
			deployments:{
				type: Array
			},
			value:{
				type: Object
			}
			
		},
		data() {
			return {
				show: false,
				deployment: {}
			};
		},
		created(){
			this.deployment = this.deployments[0];
		},
		watch:{
			deployment(val){
				this.$emit('input', val);
			}
		},
		methods:{
			/**
			 * 切换选项显示
			 */
			toggleShow(){
				this.show = !this.show;
			},
			/**
			 * 选中
			 * @param {Object} item
			 */
			onSelect(item){
				this.show = false;
				if(item.id == this.deployment.id && item.platform == this.deployment.platform){
					return ;
				}
				this.deployment = item;
				this.$emit('change', item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.uc-deployment-selector{
		width: 100%;
		
	}
	.deployment-info{
		justify-content: center;
		display: flex;
		.deployment-label{
			margin-right: 10rpx;
		}
		.iconfont{
			font-size: 28rpx;
			transition: transform ease 0.3s;
			
			
		}
		
		&.active{
			.iconfont{
				transform: rotate(180deg);
			}
		}
	}
	
	.selector{
		position: absolute;
		border-radius: 10rpx;
		background-color: #5C5D6B;
		top:88rpx;
		left: 50%;
		margin-left: 80rpx;
		transform: translateX(-50%);
		
		.option{
			height: 88rpx;
			line-height: 88rpx;
			padding:0 30rpx;
			
			&.active{
				background-color: rgba(236, 236, 236, 0.20);
			}
		}
	}
</style>